import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter_redux_hooks/flutter_redux_hooks.dart';
import 'package:wy/store/store.dart';
import 'package:wy/utils/screen_util.dart';

const navigationItems = [
  {
    'img': 'assets/images/icon-music-acc-b.png',
    'activeImg': 'assets/images/icon-music-acc.png',
    'title': '发现',
  },
  {
    'img': 'assets/images/icon-video-b.png',
    'activeImg': 'assets/images/icon-video.png',
    'title': '视频',
  },
  {
    'img': 'assets/images/icon-music-b.png',
    'activeImg': 'assets/images/icon-music.png',
    'title': '我的',
  },
  {
    'img': 'assets/images/icon-group-b.png',
    'activeImg': 'assets/images/icon-group.png',
    'title': '云村',
  },
  {
    'img': 'assets/images/icon-person-b.png',
    'activeImg': 'assets/images/icon-person.png',
    'title': '账号',
  },
];

typedef NavigationBarCallback = void Function(int);

// 这种就是自定义的
class GlobalNavigationBar extends HookWidget {
  final int value;
  GlobalNavigationBar({Key key, this.value = 0}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final isLogin = useSelector<StoreState, String>((state) => state.nickname);
    final screen = Screen(context);
    return Hero(
        tag: '_bottom_nav_bar_1_',
        child: DefaultTextStyle(
          style: TextStyle(inherit: false),
          child: Container(
            padding: EdgeInsets.only(top: screen.calc(10)),
            height: screen.calc(98),
            decoration: BoxDecoration(
              color: Color(0x66ffffff),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: navigationItems
                  .asMap()
                  .map((index, item) => MapEntry(
                      index,
                      NavigationBarItem(
                          img: item['img'],
                          activeImg: item['activeImg'],
                          title: item['title'],
                          active: value == index,
                          onTap: () {
                            switch (index) {
                              case 0:
                                Navigator.pushNamed(context, '/home');
                                break;
                              case 2:
                                Navigator.pushNamed(context, '/square');
                                break;
                              case 4:
                                // 判断是否已经登录 没有就进去
                                isLogin == null
                                    ? Navigator.pushNamed(context, '/login')
                                    : Navigator.pushNamed(
                                        context, '/user-center');
                                break;
                            }
                          })))
                  .values
                  .toList(),
            ),
          ),
        ));
  }
}

class NavigationBarItem extends StatelessWidget {
  final String img;
  final String activeImg;
  final String title;
  final bool active;
  final VoidCallback onTap;

  NavigationBarItem({
    Key key,
    this.img,
    this.activeImg,
    this.title,
    this.active = false,
    this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final screen = Screen(context);

    return GestureDetector(
      onTap: onTap,
      child: Container(
        child: Column(
          children: [
            Container(
              width: screen.calc(56),
              height: screen.calc(56),
              decoration: BoxDecoration(
                gradient: active
                    ? LinearGradient(
                        colors: [
                          Color(0xffff584a),
                          Color(0xffff1f14),
                        ],
                        begin: Alignment.centerLeft,
                        end: Alignment.centerRight,
                      )
                    : null,
                // image: DecorationImage(
                //   image: AssetImage('assets/images/icon-music-acc.png'),
                // ),
                borderRadius: BorderRadius.circular(screen.calc(28)),
              ),
              child: Center(
                  child: Image.asset(active ? activeImg : img,
                      width: screen.calc(30), height: screen.calc(30))),
            ),
            Text('发现',
                style: TextStyle(
                  fontSize: screen.calc(17),
                  color: active ? Color(0xffff1f14) : Color(0xff969696),
                )),
          ],
        ),
      ),
    );
  }
}
